<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            竞拍详细
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="content">

            <Card :bordered="false">
                <label slot="title">车源基本信息</label>
                <Row>
                    <Col span="12"> <p>  车牌号码：{{detailData.car_no}} </p> </Col>
                    <Col span="12"><p>  车辆信息： {{detailData.zscarGoods.goods_keywords}} </p> </Col>
                </Row>

                <Row>
                    <Col span="12"> <p>  联系人：{{detailData.contacts}} </p> </Col>
                    <Col span="12"><p>  联系电话： {{detailData.tel}} </p> </Col>
                </Row>
                <Row>
                    <Col span="12"> <p>  竞拍角色：
                    <label v-if="detailData.role_type  == 1 " >车源提供者</label>
                    <label v-if="detailData.role_type  == 2 " >竞拍者</label>
                  </p> </Col>
                    <Col span="12"> <p>  原因描述：
                    无
                </p></Col>
                </Row>

                <Row>
                    <Col span="12"> <p>  退还保证金：
                    {{detailData.earnest_money }}元
                    </p> </Col>
                    <Col span="12"><p>  退还状态：
                    <label v-if="detailData.return_price_statu  == 1 " >未返还 </label>
                    <label v-if="detailData.return_price_statu  == 2 " >已返还</label>
                    <label v-if="detailData.return_price_statu  == 3 " >处理中</label>
                </p> </Col>
                </Row>
            </Card>



            <Card :bordered="false">
                <label slot="title">竞拍信息</label>
                <Row >
                    <Col span="12"><p>竞拍进度： 距竞拍开始还有{{detailData.name}} </p></Col>
                    <Col span="12"><p>竞拍状态：
                    <label v-if="detailData.cancel_statu  == 1 " >正常</label>
                    <label v-if="detailData.cancel_statu  == 2 " >已取消 </label>
                </p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>拍卖场次：{{detailData.room.name}} </p></Col>
                    <Col span="12"><p>拍卖时间：{{detailData.room.stime }}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>入金/人：{{detailData.earnest_money }}</p></Col>
                    <Col span="12"> <p>入金时间：{{detailData.earnest_time}}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>竞拍最高 (万)：{{detailData.offer_price }}</p></Col>
                    <Col span="12"><p>拍卖底价 (万)：{{detailData.min_price }}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>参与人数：{{detailData.auctionListList!=undefined?detailData.auctionListList.length:0}} 人</p></Col>
                    <Col span="12"><p>是否违约：{{detailData.contract_type ? '是' : '否'}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>备注：{{detailData.contract_remark}}</p></Col>
                </Row>
            </Card>
        </div>

    </div>
</template>
<script>
    export default {
        props: ['detailStatus' , 'detailData'],
        data() {
            return {
                columns3: [
                    {
                        title: '时间：',
                        key: 'join_time'
                    },
                    {
                        title: '联系人：',
                        key: 'contacts'
                    },
                    {
                        title: '联系方式：',
                        key: 'tel'
                    },
                    {
                        title: '成交金额 (万)：',
                        key: 'earnest_money'
                    },
                    {
                        title: '服务费：',
                        key: 'earnest_money'
                    }

                ],
                columns4: [
                    {
                        title: '时间：',
                        key: 'join_time'
                    },
                    {
                        title: '违约方：',
                        key: 'contacts'
                    },
                    {
                        title: '联系人：',
                        key: 'contacts'
                    },
                    {
                        title: '联系方式：',
                        key: 'tel'
                    },
                    {
                        title: '入金金额：',
                        key: 'earnest_money'
                    },
                    {
                        title: '违约金额：',
                        key: 'earnest_money'
                    },
                    {
                        title: '备注：',
                        key: 'earnest_money'
                    },

                ],
                columns1: [
                    {
                        title: '时间：',
                        key: 'join_time'
                    },
                    {
                        title: '联系人：',
                        key: 'contacts'
                    },
                    {
                        title: '联系方式：',
                        key: 'tel'
                    },
                    {
                        title: '入金金额：',
                        key: 'earnest_money'
                    },

                ],
                columns2: [
                    {
                        title: '竞拍时间：',
                        key: 'join_time'
                    },
                    {
                        title: '联系人：',
                        key: 'contacts'
                    },
                    {
                        title: '联系方式：',
                        key: 'tel'
                    },
                    {
                        title: '竞拍价格 (万)：',
                        key: 'offer_price'
                    },
                    {
                        title: '状态：',
                        key: 'bid_statu',
                        render: (h, params) => {
                            const row = params.row;
                            let tagcolor = "yellow";
                            let text = "1";
                            console.log(row);
                            switch (row.bid_statu) {
                                case '1':
                                    tagcolor = "green";
                                    text= "未中标";
                                    break;
                                case '2':
                                    tagcolor = "green";
                                    text="已中标";
                                    break;
                                case  '3':
                                    tagcolor = "green";
                                    text="待出结果";
                                    break;
                            }
                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: tagcolor
                                }
                            }, text);
                        }
                    }

                ],
                auctionListList: [],
            }
        },
        watch: {
            detailData(curVal){
                this.auctionListList = curVal.auctionListList;

            }
        },
        methods: {
            close() {
                this.$emit('closeModal')
            }
        }
    }
</script>
<style scoped lang="scss">
    .m-detail-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .content {
            font-size: 14px;
            padding: 15px 50px 150px 25px;
            overflow-y: auto;
        }

        .ivu-row {
            height: 30px;
        }

        .ivu-card {
            margin-top: 20px;
        }

    }
</style>
